<template>
	<view class="containerbox bgc-white">
		<uv-navbar leftText="生词本" auto-back placeholder>
			<template v-slot:right>
				<view class="flex items-center" @tap="popupRef.open()" :style="{ marginRight: navRight }">
					<view class="text-28 mr-10">遮挡设置</view>
					<uni-icons type="settings" />
				</view>
			</template>
		</uv-navbar>
		
		<view style="border-bottom: 1px solid #e6e6e6">
			<uv-tabs 
				@click="handleClick" 
				:list="thesauruslist" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" 
				:inactiveStyle="{
					color: '#999999',
					transform: 'scale(1)'
				}"  
			/>
		</view>
		
		<scroll-view :scroll-y="true" class="containerfill">
			<view class="py-30 mx-30 border-bottom flex items-center justify-between" v-for="item, index in datalist" :key="item.id" @tap="playWord(item, index)">
				<view>
					<view class="text-38">{{ shelter === 1 || !shelter ? '--' : item.word }} <text class="ml-20 text-gray text-26" v-if="item.soundmark">/:{{ item.soundmark }}/</text></view>
					<view class="mt-20">
						<text class="text-24 mr-30 text-gray" style="font-style: italic;">n</text>
						<text class="text-26">{{ shelter === 2 || !shelter ? '--' : item.translation }}</text>
					</view>
				</view>
				
				<view>
					<c_trumpet :play="item.play" playEvent />
				</view>
			</view>
			
			<dw_default :src="`${imageBaseUrl2}/svg/empty.svg`"  v-if="!loading && !datalist.length" class="my-auto" />
		</scroll-view>
	</view>
	
	
	<uv-popup mode="bottom" :safe-area-inset-bottom="false" @mask-click="close" ref="popupRef" round="32rpx">
		<view class="pb-60">
			<view class="flex items-center justify-between pt-30 pb-40 px-30">
				<view class="text-36 font-weight-700">遮挡设置</view>
				<uv-icon name="close" size="32rpx" @tap="close" />
			</view>
			
			<uv-radio-group v-model="shelter" custom-style="margin: 0 50rpx 0 30rpx" placement="colmun" icon-placement="right" active-color="#1abc9c">
				<uv-radio :name="1" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">遮挡原文</uv-radio>
				<uv-radio :name="2" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">遮挡译文</uv-radio>
				<uv-radio :name="0" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">遮挡全部</uv-radio>
				<uv-radio :name="-1" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">显示全部</uv-radio>
			</uv-radio-group>
		</view>
	</uv-popup>
</template>

<script setup>
	
	import { ref } from 'vue';
	import readApi from '@/common/apis/read';
	import c_trumpet from './components/trumpet.vue';
	import { getArticleWordsList_api } from '@/common/apis/course';
  import {imageBaseUrl2} from "@/common/config";
	
	
	/** 导航栏 margin-right */
	const navRight = ref(0);
	
	// #ifdef MP-WEIXIN
	/** 获取小程序胶囊信息 */
	const { width } = uni.getMenuButtonBoundingClientRect()
	navRight.value = `${width}px`;
	// #endif
	
	/** props */
	const props = defineProps(['id']);
	
	/** 生词本列表 */
	const datalist = ref([]);
	
	/** 请求状态 */
	const loading = ref(true);
	
	
	/** 获取生词本列表方法 */
	const getArticleWord = async query => {
		const result = await getArticleWordsList_api({ ...query, type: 2 });
		datalist.value = result;
		loading.value = false;
	};
	
	/** 获取生词本列表 */
	getArticleWord({ articleId: props.id, type: 2 });
	
	
	/** 词库列表 */
	const thesauruslist = ref([{ name: '最近添加' }]);
	
	/** 获取词库列表列表方法 */
	const getThesauruslist = async () => {
		const result = await readApi.thesauruslist({ type: 2 });
		thesauruslist.value = [...thesauruslist.value, ...result];
	};
	
	/** 获取词库列表列表 */
	getThesauruslist();
	
	
	/** 切换分类 */
	const handleClick = async event => {
		await getArticleWord(event.id ? { thesaurusId: event.id } : { articleId: props.id });
	};
	
	
	/** 当前播放词汇的索引 */
	const playWordIndex = ref(0);
	
	/** 关闭上一次播放状态 */
	const closelastPlay = () => {
		datalist.value[playWordIndex.value].play = false;
	};
	
	/** 音频自然播放结束事件 */
	uni.useAudio.onEnded(closelastPlay);
	
	/** 播放词汇 */
	const playWord = (item, index) => {
		closelastPlay();
		playWordIndex.value = index;
		uni.useAudio.src(item.voiceFile?.url);
		item.play = true;
	};
	
	
	/** 遮挡设置弹窗 */
	const popupRef = ref({});
	
	/** 关闭遮挡设置弹窗 */
	const close = () => {
		popupRef.value?.close();
	};
	
	/** 遮挡 1：原文、2：疑问、0：全部 */
	const shelter = ref(-1);


</script>